/*============================================================
Name	: MK azewBz&#8482;
URI	: http://azewbz.blogspot.com/
Author 	: fajar faturohman
        : Copyright 2014 IMAX
============================================================ */

body {
color: #ACACAB;
font-size: 12px;
font-family: 'exo2regular';
background-color: #000000;
}

/*============================================================
  CSS Reset [ Resets default browser styles ] 
============================================================*/

.section {margin: auto;width: 900px;}

* {	margin: 0px;}

h1, h2, h3, h4, h5, h6 {
font-family: "dharma_gothic_ebold";
font-size: 30px;
}

a,
a:link,
a:visited {
text-decoration: none;
color: #ACACAB;
}

li {list-style: none;}

::-moz-selection{ background: #900; color: #ACACAB; }
::selection { background: #900; color: #ACACAB; }

/*============================================================
  canvas
============================================================*/

#canvas {
position: relative;
width: 900px;
margin: auto;
}

#badge {
position: fixed;
position: relative!imortant;
z-index:1;
top: 50%;
left: 50%;
width: 500px;
height: 500px;
background: url(https://azewbz.googlecode.com/svn/trunk/CM/AB/image/badge-logo.png);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}

/*============================================================
  clock 
============================================================*/

.MK-clock {
position: fixed;
float: left;
left: -20px;
top: 20px;
text-transform: uppercase;
}

.MK-country{
margin-top: 15px;
}

/*============================================================
  badge - page
============================================================ */

#badge-page {
position: relative;
top: 20px;
margin: 0 auto;
height: 140px;
background-image: url(https://azewbz.googlecode.com/svn/trunk/badge.png);
cursor: crosshair;
}

/*============================================================
  section.header / nav-header
============================================================*/

section.header {
margin: 0 auto;
padding-bottom: 5px;
text-align: center;
border-bottom: 1px solid #141414;
}

.nav-header {
text-align: center;
margin-top: 10px;
}

.nav-header li {
display: inline;
}

.nav-header a {
font-family: "dharma_gothic_ebold";
text-transform: uppercase;
margin: 0 14px 0 14px;
font-size: 20px;
letter-spacing: 0.5px;
display: inline-block;
overflow: hidden;
}

.nav-header li:before {
top: -8px;
font-size: 10px;
position: relative;
font-family: fontAwesome;
}

.nav-header a span {
position: relative;
display: inline-block;
transition: transform 0.3s;
-moz-transition: -moz-transform 0.3s;
-webkit-transition: -webkit-transform 0.3s;
}

.nav-header a span:before {
color: #fff;
position: absolute;
top: 100%;
content: attr(data-hover);
transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}

.nav-header a:hover span,
.nav-header a:focus span {
transform: translateY(-100%);
-moz-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
}

/*============================================================
  background
============================================================*/

#background {
position: fixed;
background-image: url(https://azewbz.googlecode.com/svn/trunk/pattern.png);
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/*============================================================
  menu foter / page main
============================================================*/

#foter-content{margin:auto;width:900px}
.foter-right{margin-top:10px;border-top:1px solid #181818}
.foter-right p{text-align:center;margin-top:10px;margin-bottom:10px;font-size:10px}
.foter-right span{color:red}

/*============================================================
  MK-load / load page
============================================================*/

#MK-layout {
position:fixed;
top:0;
left:0;
background: rgba(0,0,0,.8);
z-index:9999;
text-align:center;
width:100%;
height:100%;
padding-top:20%;
display:none;
}

#MK-layout:before {
content: '';
background-image: url(https://azewbz.googlecode.com/svn/trunk/pattern.png);
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 2;
}

.MK-load {
border:10px solid #900;
border-right:10px solid rgba(0,0,0,0);
border-left:10px solid rgba(0,0,0,0);
border-radius:150px;
width:150px;
height:150px;
margin:0 auto;
-moz-animation:berputarkecil 1s infinite linear;
-webkit-animation:berputarkecil 1s infinite linear;
}

.MK-load1{
position: relative;
margin: 0 auto;
top: -155px;
width: 140px;
height: 140px;
background-image: url(http://3.bp.blogspot.com/-zEF00zwCQQg/VGRaf2KE-iI/AAAAAAAAD2Y/f3ZNmkKS7w0/s1600/load.png);
background-size:140px 140px;  
border-radius: 150px;
}

@-moz-keyframes berputarkecil{0%{-moz-transform:rotate(0deg)}100%{-moz-transform:rotate(360deg)}}
@-webkit-keyframes berputarkecil{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}

/*============================================================
  MK-load / load page
============================================================*/

body .navbar, .status-msg-body, .status-msg-wrap {display:none;}
.post-outer h3 {margin-top: 40px;padding: 10px;border-bottom: 1px solid #181818;border-top: 1px solid #181818;text-align: center;text-transform: uppercase;color: #fff;}

#nav-social {
position: fixed;
top: 20px;
right: 20px;
}

#nav-social li{
display: inline-block;
}

#start-main {
position: fixed;
bottom: 20px;
right: 20px;
}

.social {
display: inline-block;
width: 20px;
height: 20px;
text-align: center;
position: relative;
margin-left: 5px;
padding: 5px;
}

.social:after {
position: absolute;
width: 100%;
height: 100%;
-webkit-box-sizing: content-box; 
-moz-box-sizing: content-box; 
box-sizing: content-box;
}

.social:before {
font-family: 'fontawesome';
font-size: 15px;
line-height: 20px;
display: block;
}

.pro .social {
border: 3px solid #ACACAB;
border-radius:50px;
overflow: hidden;
-webkit-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
-moz-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}

.pro .social:after {display: none;}

.pro .social:hover {
background: #fff;
color: #000;
border: 3px solid #fff;
}

.pro1 .social:hover:before {
-webkit-animation: B3 0.3s forwards;
-moz-animation: B3 0.3s forwards;
animation: B3 0.3s forwards;
}

@-webkit-keyframes B3{49%{-webkit-transform:translateY(100%)}50%{opacity:0;-webkit-transform:translateY(-100%)}51%{opacity:1}}
@-moz-keyframes B3{49%{-moz-transform:translateY(100%)}50%{opacity:0;-moz-transform:translateY(-100%)}51%{opacity:1}}
@keyframes B3{49%{transform:translateY(100%)}50%{opacity:0;transform:translateY(-100%)}51%{opacity:1}}

/*============================================================
  progress - web
============================================================*/

#progress-overlay {
width: 100%;
height: 100%;
position: fixed;
z-index: 99;
background-color: #000;
background-image:url(https://azewbz.googlecode.com/svn/trunk/pattern.png);  
top: 0px;
left: 0px;
-webkit-animation: fadeOut 10s linear forwards;
-moz-animation: fadeOut 10s linear forwards;
-o-animation: fadeOut 10s linear forwards;
-ms-animation: fadeOut 10s linear forwards;
-webkit-animation: fadeOut 10s linear forwards;
}

.progress-MK {
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

.progress {
margin: auto;
margin-bottom: 10px;
width: 700px;
height: 108px;
background: url(https://azewbz.googlecode.com/svn/trunk/CM/AB/image/progess-load.png);
}

.progress-val {
position: absolute;
right: 5px;
height: 25px;
color:#fff;  
font-size:12px;  
line-height: 16px;
}

.progress-bar {
position: relative;
display: block;
height: 18px;
margin: auto;
width: 700px;
background: #191919;
}

.progress-in {
height:18px;
width:0;
background: #900;
}

@-webkit-keyframes fadeOut {
0% { opacity: 1;top:0px;}
10% { opacity: 1;top:0px; }
90% { opacity: 1; -webkit-transform: (0px);top:0px;}
99% { opacity: 0; -webkit-transform: (-30px);top:0px;}
100% { opacity: 0;top: -980px;}
}